<template>
  <div id="Login">
    <el-alert v-show="showTitle" class="title" :title="message" type="error"> </el-alert>
    <transition name="face-form" mode="in-out">
      <main v-show="showMain" v-loading="loading">
        <h1>欢迎来到elm后台</h1>
        <form action="" v-on:submit.prevent>
          <div class="inputBox">
            <label for="username">用户名:</label>
            <input type="text" v-model="username" autofocus id="username" name="username" placeholder="请输入用户名" maxlength="8" />
          </div>
          <div class="inputBox">
            <label for="password">密 码 : </label>
            <input type="password" v-model="password" id="password" name="password" placeholder="请输入密码" maxlength="10" />
          </div>
          <div class="verifyBox">
            <img v-on:click="getVerImg" :src="verImg" alt="" />
            <input type="text" id="verify" v-model="code" name="verify" v-on:blur="isVerFlag" placeholder="验证码" />
          </div>
          <div class="btnBox">
            <button v-on:click="userLogin">登录</button>
          </div>
        </form>
      </main>
    </transition>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { setStoage } from "@/config/Utils";

import { mapMutations } from "vuex";

import { version, verFlag, userLogin } from "@/api/getPostApi";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      showMain: false,
      verImg: "",
      verKey: "",
      code: "",
      showTitle: false,
      message: "",
      username: "",
      password: "",
      verFlag: false,
      loading: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapMutations(["setUserImage"]),
    isVerFlag() {
      this.loading = true;
      verFlag(this.code, this.verKey).then((response) => {
        this.loading = false;
        if (!response.data) {
          this.message = "验证码错误";
          this.showTitle = true;
        } else {
          this.showTitle = false;
          this.verFlag = true;
        }
      });
    },
    getVerImg() {
      version().then((response) => {
        this.verImg = response.data.captcha;
        this.verKey = response.data.captchaKey;
      });
    },

    userLogin() {
      this.isVerFlag();
      if (!this.username) {
        this.message = "用户名不能为空";
        this.showTitle = true;
      } else if (!this.password) {
        this.message = "密码不能为空";
        this.showTitle = true;
      } else if (!this.code) {
        this.message = "验证码不能为空";
        this.showTitle = true;
      } else if (this.verFlag) {
        this.loading = true;
        userLogin(this.username, this.password).then((response) => {
          this.loading = false;
          this.showTitle = true;
          this.message = response.data.message;
          if (response.data.status) {
            this.setUserImage(response.data.userImg);
            setStoage(response.data.id, response.data.token, response.data.userName, response.data.userImg);
            this.$router.push("/admin/index");
          }
        });
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getVerImg();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.showMain = true;
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
#Login {
  user-select: none;
  height: 100vh;
  background: $backBlue-color;

  .title {
    position: absolute;
    width: 500px;
    top: 10rem;
  }
  @include display-flex;
  main {
    border: solid 1px $color-white;
    padding: 1.5rem 4rem;
    border-radius: 1rem;
    h1 {
      color: $color-white;
    }
    .inputBox {
      color: $color-white;
      margin-top: 1rem;
      display: flex;
      justify-content: space-around;
      label {
        text-shadow: $box-shadow;
      }
      input {
        padding: 5px;
        border-radius: 5px;
        border: solid 1px $color-white;
        background: transparent;
        color: $color-white;
        box-shadow: $box-shadow;
      }
    }
    .btnBox {
      margin: 1rem;
      text-align: center;
      button {
        width: 7rem;
        height: 1.7rem;
        margin: 0 3rem;
        border-radius: 5px;
        font-weight: bold;
        font-size: 1rem;
      }
    }

    .verifyBox {
      display: flex;
      justify-content: space-around;
      margin: 1rem;
      img {
        width: 5rem;
        height: 2rem;
      }
      input {
        margin-left: 15px;
        width: 5rem;
        margin-right: 4.9rem;
        padding: 5px;
        border-radius: 5px;
        border: solid 1px $color-white;
        background: transparent;
        color: $color-white;
        box-shadow: $box-shadow;
      }
    }
  }
  .face-form-enter-active,
  .face-form-leave-active {
    transition: all 2s;
  }

  .face-form-enter,
  .face-form-leave {
    transform: translate3d(0, -50px, 0);
    opacity: 0;
  }
}
</style>
